import { View, Image, RichText } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import actions from '../../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../../selectors';
import * as T from '../../types';
import 'taro-ui/dist/style/components/modal.scss';
import { IPLAND_OSS_HOST } from '../../../constant';
import { _ } from 'wmkit';


interface INaviProps {
  isOpened: boolean;
  onCancel: Function;
}
type IToolsBoxProps = T.IProps & INaviProps;

//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
// export default class RankModal extends Component<INaviProps, any> {
export default class RankModal extends Component<Partial<IToolsBoxProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    let {
      isOpened,
      main: { description },
    } = this.props;
    return (
      isOpened ? <View className="RankContainer">
        <View className="rank">
          <View className="top">
            <View className="name">宝箱说明</View>
            <Image
              className="close"
              src={`${IPLAND_OSS_HOST}home/close.png`}
              onClick={() =>
                this.props.onCancel()
              }>
            </Image>
          </View>
          <View className='desc'>
            <RichText nodes={_.formatRichText(description)} />
          </View>
        </View>
      </View> : null
    );
  }
}

//create by moon https://github.com/creasy2010/moon
